<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动情景1.图片与文字环绕</title>
		<style>
			p{
				bord er: 1px solid red;
				flo at: left;
				font-size: 16px;/*页面文字默认大小：16px*/
				line-height: 20px;/*浮动p块元素，内容行内元素*/
				/*结论：文本不浮动，块包行*/
			}
			img{
				border: 1px solid red;
				float: left;
			}
		</style>
	</head>
	<body>
		<h1>浮动情景1.图片与文字环绕</h1>
		<img src="img/img_2.png" alt="哪吒" width="200px" height="200px"/>
		
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit ex expedita hic quidem aspernatur, beatae dolorem deleniti quia debitis non vel nam repellat ipsa maiores praesentium harum ut eius adipisci! Lorem ipsum dolor sit amet consectetur adipisicing elit. At error provident labore iusto animi est officiis ea consequuntur mollitia, aperiam voluptatibus cum neque ipsum obcaecati perspiciatis nobis ex voluptates tempora. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit aspernatur autem laudantium illum id nisi quia dicta. Architecto excepturi laborum, deleniti debitis nam iste officiis, necessitatibus tenetur, quia sapiente libero. Lorem ipsum dolor sit amet consectetur adipisicing elit. Non voluptas soluta, officia aspernatur quidem aliquam asperiores! Eum ea quasi vero dicta voluptas et placeat fugit labore culpa, sapiente, maxime <est class="lorem"> </est></p>
	</body>
</html>